<template>
    <div>
        <ProductionTup />
        <Loading v-if="loadingShow" />
        <van-checkbox-group v-model="result" ref="checkboxGroup">
            <ul>
                <li class="container" v-for="item in cartList" :key="item.goods_id">
                    <div>
                        <van-checkbox
                            :name="item.id"
                            @click="change(item.retail_price, item.number, item.id)"
                        ></van-checkbox>
                    </div>
                    <div style="width: 100%" class="test">
                        <van-swipe-cell>
                            <van-card
                                :price="item.retail_price | price"
                                :title="item.goods_name"
                                :thumb="item.list_pic_url"
                                :centered="true"
                            >
                                <template #num v-if="item.showNum">
                                    <span @touchend="item.showNum = false">x{{ item.number }}</span>
                                </template>
                                <template #footer v-else>
                                    <van-stepper
                                        v-model="item.number"
                                        @plus="add(item.id, item.retail_price)"
                                        @minus="reduce(item.id, item.retail_price)"
                                    />
                                </template>
                            </van-card>
                            <template #right>
                                <van-button
                                    square
                                    text="删除"
                                    type="danger"
                                    class="delete-button"
                                    @click="
                                        deleteProduction(
                                            item.product_id,
                                            item.retail_price,
                                            item.number,
                                            item.id
                                        )
                                    "
                                />
                            </template>
                        </van-swipe-cell>
                    </div>
                </li>
            </ul>
        </van-checkbox-group>

        <van-submit-bar :price="price * 100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
        </van-submit-bar>
        <div class="text"></div>
    </div>
</template>

<script>
import ProductionTup from '../component/ProductionTup.vue'
import Loading from '../component/Loading.vue'
export default {
    name: 'Cart',
    data() {
        return {
            result: [],
            checked: false,
            cartList: [],
            cartTotal: {},
            price: 0,
            loadingShow: true
        }
    },
    mounted() {
        this.getData()
    },
    components: {
        ProductionTup,
        Loading
    },
    watch: {
        result: {
            handler() {
                console.log(this.cartList.length)
                console.log(this.result.length)

                if (this.cartList.length == this.result.length) {
                    this.checked = true
                } else {
                    this.checked = false
                }
            }
        }
    },
    methods: {
        // 页面初始化 获取数据
        getData() {
            this.$http
                .post('/cart/index')
                .then(res => {
                    console.log(res.data)
                    if (res.data.errno != 0) {
                        console.log(res.data.errmsg)
                        return
                    }
                    const { cartList, cartTotal } = res.data.data

                    cartList.forEach(item => {
                        item.showNum = true
                    })
                    this.cartList = cartList
                    this.cartTotal = cartTotal
                    this.loadingShow = false
                })
                .catch(err => {
                    console.log(err)
                })
        },
        // 删除商品
        deleteProduction(ids, v, number) {
            console.log(v,number)
            
            this.price = this.price - v * number
            if(this.price < 0){
                this.price = 0
            }
            this.$http
                .post('/cart/delete', {
                    productIds: ids.toString()
                })
                .then(res => {
                    console.log(res)
                    if (res.data.errno != 0) {
                        console.log(res.data.errmsg)
                        return
                    }
                    this.cartList = res.data.data.cartList
                    this.getData()
                })
                .catch(err => {
                    console.log(err)
                })
        },
        //提交订单
        onSubmit() {
            this.$toast({
                message: '该功能暂未开放'
            })
        },
        //全选则{
        all() {
            if (this.checked == true) {
                this.$refs.checkboxGroup.toggleAll(true)
                console.log(this.cartList)
                let number = this.cartList.map(item => {
                    return item.retail_price * item.number
                })
                let lastNumber = number.reduce((pre, cur) => {
                    return pre + cur
                })
                this.price = lastNumber
            } else {
                this.price = 0
                this.$refs.checkboxGroup.toggleAll(false)
            }
        },
        //复选框当选中的值改变的时候
        change(v, number, id) {
            if (this.result.indexOf(id) == -1) {
                this.price = this.price - v * number
            } else {
                this.price = v * number + this.price
            }
        },
        //点击商品数量
        number() {
            this.showNum = false
        },
        // 步进器 加法
        add(id, pri) {
            let arr = this.result.indexOf(id)
            if (arr == -1) {
                return
            }
            this.price += pri
        },
        // 步进器 减法
        reduce(id, pri) {
            let arr = this.result.indexOf(id)
            if (arr == -1) {
                return
            }
            this.price -= pri
        }
    }
}
</script>
<style scoped>
.container {
    display: flex;
    flex-flow: nowrap;
    position: relative;
    margin: 2px 0;
    background-color: #fafafa;
    overflow: none;
}
.container div:first-child {
    flex: 1 1 0;
    text-align: none;
    line-height: 1.2;
}
.container div:last-child {
    flex: 7 1 0;
    background-color: #fafafa;
}
.container /deep/ .van-checkbox__icon {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
}
.text {
    width: 100%;
    height: 55px;
}
.container /deep/ .van-card__title {
    font-size: 16px;
    margin-top: 12px;
}
.container /deep/.van-card__bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
}
.container /deep/ .van-card__num {
    font-size: 12px;
    color: black;
    padding: 1px 4px;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
}
.container /deep/ .delete-button {
    height: 100%;
    width: 100%;
}
.container /deep/ .van-button__content {
    background-color: #ee0a24 !important;
}
</style>